<template>
    <div class="white-board-context-menu" v-if="isShow" :style="{ left: left + 'px', top: top + 'px' }">
        <template v-if="isHasActiveElements">
            <div class="item" :class="{ disabled: !canMoveLevel }" @click="exec('moveUp')">
                上移一层
            </div>
            <div class="item" :class="{ disabled: !canMoveLevel }" @click="exec('moveDown')">
                下移一层
            </div>
            <div class="item" :class="{ disabled: !canMoveLevel }" @click="exec('moveTop')">
                置于顶层
            </div>
            <div class="item" :class="{ disabled: !canMoveLevel }" @click="exec('moveBottom')">
                置于底层
            </div>
            <div class="splitLine"></div>
            <div class="item danger" @click="exec('del')">删除</div>
            <div class="item" @click="exec('copy')">复制</div>
            <div class="item" :class="{ disabled: groupStatus === 'disabled' }" @click="exec(groupStatus)">
                {{ groupBtnText }}
            </div>
        </template>
        <template v-else>
            <div class="item" @click="exec('selectAll')">全部选中</div>
            <div class="item" @click="exec('backToCenter')">回到中心</div>
            <div class="item" @click="exec('fit')">显示全部</div>
            <div class="item" @click="exec('resetZoom')">重置缩放</div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const props = defineProps({
    app: {
        type: Object,
        required: false,
        default: {} as any
    }
})

const isShow = ref(false)
const left = ref(0)
const top = ref(0)
const isHasActiveElements = ref(false)
const canMoveLevel = ref(false)
const groupStatus = ref('disabled')
const groupBtnText = computed(() => {
    return {
        disabled: '编组',
        dogroup: '编组',
        ungroup: '取消编组'
    }[groupStatus.value]
})

const show = (e: MouseEvent, activeElements: any[]) => {
    isHasActiveElements.value = activeElements.length > 0
    canMoveLevel.value = activeElements.length === 1
    left.value = e.clientX + 10
    top.value = e.clientY + 10
    isShow.value = true
    handleGroup(activeElements)
}

const handleGroup = (activeElements: any[]) => {
    let isGroup = true
    activeElements.forEach(item => {
        if (!item.hasGroup()) {
            isGroup = false
        }
    })
    if (isGroup) {
        groupStatus.value = 'ungroup'
    } else if (activeElements.length > 1) {
        groupStatus.value = 'dogroup'
    }
}

const hide = () => {
    isShow.value = false
    left.value = 0
    top.value = 0
}

if (props.app) {
    props.app.on('contextmenu', show)
}


document.body.addEventListener('click', hide)

const exec = (command: string) => {
    if (props.app) {
        switch (command) {
            case 'moveUp':
                props.app.moveUpCurrentElement()
                break
            case 'moveDown':
                props.app.moveDownCurrentElement()
                break
            case 'moveTop':
                props.app.moveTopCurrentElement()
                break
            case 'moveBottom':
                props.app.moveBottomCurrentElement()
                break
            case 'del':
                props.app.deleteCurrentElements()
                break
            case 'copy':
                props.app.copyPasteCurrentElements()
                break
            case 'selectAll':
                props.app.selectAll()
                break
            case 'backToCenter':
                props.app.scrollToCenter()
                break
            case 'fit':
                props.app.fit()
                break
            case 'resetZoom':
                props.app.setZoom(1)
            case 'dogroup':
                props.app.dogroup()
                break
            case 'ungroup':
                props.app.ungroup()
                break
            default:
                break
        }
    }
}
</script>

<style lang="less" scoped>
.white-board-context-menu {
    position: fixed;
    width: 161px;
    background: #fff;
    box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
    border-radius: 4px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;

    .splitLine {
        height: 1px;
        background-color: #f5f5f5;
        margin: 5px 0;
    }

    .item {
        height: 28px;
        line-height: 28px;
        padding-left: 16px;
        cursor: pointer;

        &.danger {
            color: #f56c6c;
        }

        &:hover {
            background: #f5f5f5;
        }

        &.disabled {
            color: grey;
            cursor: not-allowed;

            &:hover {
                background: #fff;
            }
        }
    }
}
</style>